<template>
	<view class="wrap">
		<view class="header">
			<image class="bg" src="/static/new_images/data-header.png"></image>
			<view class="info" style="position:relative;z-index: 5;">
				<view class="title-data">{{$t('shuju')}}</view>
				<view class="cell">
					<view class="cell-title">
						<text class="text">{{$t('zzczh')}}（USDT）</text>
					</view>
					<view class="cell-money">
						{{ pageData.walletTotal }}
						<text class="text">USDT</text>
					</view>
					<view class="cell-conversion">≈ ￥ <text>{{ pageData.walletTotalCny }}</text></view>
				</view>
			</view>
			<view class="swiper">
				<view class="swiper_list_item">
					<image src="/static/new_images/data-1.png"></image>
					<view class="title">{{$t('qbzh')}}</view>
					<view class="value">{{ pageData.walletSelf }} U</view>
				</view>
				<view class="swiper_list_item">
					<image src="/static/new_images/data-2.png"></image>
					<view class="title">{{$t('oyjys')}}</view>
					<view class="value">{{ pageData.walletOkex }} U</view>
				</view>
				<view class="swiper_list_item">
					<image src="/static/new_images/data-3.png"></image>
					<view class="title">{{$t('baye')}}</view>
					<view class="value">{{ pageData.walletBinance }} U</view>
				</view>
			</view>
		</view>
		<view class="tom-container">
			<view class="cell_yun">
				<view class="item">
					<view class="item_top">{{ pageData.grandDayNum }}</view>
					<text class="item_text">{{$t('zsyts')}}</text>
				</view>
				<view class="item">
					<view class="item_top">{{ pageData.spotGrandAmount }}</view>
					<text class="item_text">{{$t('xhljyl')}}</text>
				</view>
			</view>
			<view class="cell_yun">
				<view class="item">
					<view class="item_top">{{ pageData.contractGrandAmount }}</view>
					<text class="item_text">{{$t('hjljyl')}}</text>
				</view>
				<view class="item">
					<view class="item_top">{{ pageData.allGrandAmount }}</view>
					<text class="item_text">{{$t('zyl')}}</text>
				</view>
			</view>
			<view class="my-chart">
				<view class="btn_list">
					<view class="btn" @tap="toPage()">
						{{$t('sjmx')}}
					</view>
				</view>
				<view class="Chart">
					<qiun-data-charts
						type="area"
						:opts="{
							dataLabel: false,
							fontSize: 10,
							padding: [15, 15, 15, 15],
							color: ['#0032B7'],
							xAxis: { labelCount: 7, rotateLabel: true },
							yAxis: { disableGrid: true, data: [{ position: 'left' }] },
							extra: { area: { type: 'curve', gradient: true } },
							legend: { show: false }
						}"
						:chartData="chartsDataLine3"
						:reshow="reshow"
						tooltipFormat="liao"
					/>
				</view>
			</view>
			<view class="Data_tab">
				<view class="item" v-for="(item, index) in Data_tab" :key="index" :class="{ item1: Data_tab_index == index }" @tap="Datatab(index)">{{ item }}</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" class="popup">
			<view class="pop_nr">
				<view class="pop_title">{{$t('xzsj')}}</view>
				<view @tap="calendar_show = true" class="pop_calendar">{{ calendar_text }}</view>
				<view class="lisy_btn">
					<u-button type="primary" @tap="diy_success" size="medium">{{$t('queren')}}</u-button>
					<u-button size="medium" @tap="(show = false), (calendar_Data = {}), (calendar_text = '请选择日期')">{{$t('quxiao')}}</u-button>
				</view>
			</view>
		</u-popup>
		<u-calendar v-model="calendar_show" mode="range" @change="calendar_change" class="Data_calendar"></u-calendar>
	</view>
</template>

<script>
import navbar from '@/components/navbar.vue';
export default {
	data() {
		return {
			Data_tab: [this.$t('zj7r'), this.$t('zj30r'), this.$t('zj90r'), this.$t('zdy')],
			Data_tab_index: 0,
			chartsDataLine3: {},
			reshow: true,
			show: false,
			calendar_show: false,
			calendar_text: this.$t('qxzrq'),
			calendar_Data: {},
			pageData: {},
			linearareadata: {
				categories: ['2021-05-04'],
				series: [
					{
						name: this.$t('ylje'),
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								global: false // 缺省为 false
							}
						},
						data: []
					}
				]
			}
		};
	},
	onHide() {
		this.show = false;
		this.calendar_show = false;
		this.calendar_text = this.$t('qxzrq');
		this.calendar_Data = {};
	},
	onShow() {
		this.indexData();
	},
	methods: {
		indexData() {
			uni.showLoading({
				mask: true,
				title: this.$t('loading.title')
			});
			this.$api.dataApi
				.homePage({
					dayAgo: this.Data_tab_index == 0 ? 7 : this.Data_tab_index == 1 ? 30 : 90
				})
				.then(res => {
					this.linearareadata.categories = res.data.discountGrandAmount.dateLogs;
					this.linearareadata.series[0].data = res.data.discountGrandAmount.totalAmounts;
					this.chartsDataLine3 = this.linearareadata;
					this.pageData = res.data.allProfit;
					uni.hideLoading();
				})
				.catch(res => {
					uni.hideLoading();
				});
		},
		Datatab(index) {
			if (index != 3) {
				this.Data_tab_index = index;
				uni.showLoading({
					mask: true,
					title: this.$t('loading.title')
				});
				this.$api.dataApi
					.getLineChart({
						dayAgo: this.Data_tab_index == 0 ? 7 : this.Data_tab_index == 1 ? 30 : 90
					})
					.then(res => {
						this.linearareadata.categories = res.data.dateLogs;
						this.linearareadata.series[0].data = res.data.totalAmounts;
						uni.hideLoading();
					})
					.catch(res => {
						uni.hideLoading();
					});
			} else {
				console.log(index);
				this.show = true;
			}
		},
		toPage() {
			uni.navigateTo({
				url: '/pages/Data/DataBreakdown/DataBreakdown'
			});
		},
		calendar_change(e) {
			console.log(e);
			this.calendar_text = e.startDate + ' - ' + e.endDate;
			this.calendar_Data = e;
		},
		diy_success() {
			console.log(this.calendar_Data);
			uni.showLoading({
				mask: true,
				title: this.$t('loading.title')
			});
			this.$api.dataApi
				.getLineChart({
					startDate: this.calendar_Data.startDate,
					endDate: this.calendar_Data.endDate
				})
				.then(res => {
					this.linearareadata.categories = res.data.dateLogs;
					this.linearareadata.series[0].data = res.data.totalAmounts;
					this.show = false;
					this.Data_tab_index = 3;
					uni.hideLoading();
				})
				.catch(res => {
					uni.hideLoading();
				});
		}
	},
	components: {
		navbar
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	background-color: #f5f5f5;
	.tom-container {
		display: block;
		margin-top:170rpx;
	}
}

.header{
	position:relative;
	padding-bottom:100rpx;
	/* #ifdef  APP-PLUS */
	padding-top:var(--status-bar-height);
	/* #endif */
	/* #ifdef H5 */
	padding-top:5rpx;
	/* #endif */
	.bg{
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		z-index: 1;
	}
	.title-data{
		color:#fff;
		padding:20rpx 30rpx;
		font-size:36rpx;
		font-weight:800;
	}
	.cell {
		color: #fff;
		text-align:center;
		.cell-title {
			.text {
				font-size: 32rpx;
			}
		}
		.cell-money {
			font-size: 48rpx;
			font-weight: bold;
			margin: 10rpx 0rpx 10rpx 0rpx;
			.text {
				font-size: 28rpx;
				margin-left: 10rpx;
				font-weight: 400;
			}
		}
		.cell-conversion {
			font-size: 28rpx;
		}
	}
	
	.swiper {
		position:absolute;
		bottom:-150rpx;
		left:3%;
		background:#fff;
		width:94%;
		margin:0 auto;
		border-radius:20rpx;
		z-index: 10;
		box-shadow: 4rpx 4rpx 5rpx 0 #e3e3e3;
		padding:0 30rpx 0 100rpx;
		.swiper_list_item {
			line-height:80rpx;
			height:80rpx;
			box-sizing: border-box;
			text-align:center;
			width:100%;
			font-size:32rpx;
			border-bottom:1rpx solid #e3e3e3;
			position:relative;
			&:last-child{
				border:none;
			}
			&::after{
				content:' ';
				display:block;
				clear:both;
			}
			image{
				position:absolute;
				width:50rpx;
				height:50rpx;
				top:15rpx;
				left:-70rpx;
			}
			.title{
				float:left;
			}
			.value{
				float:right;
			}
		}
	}
}
.Data_tab {
	display: flex;
	justify-content: space-between;
	padding: 18rpx $nr-padd;
	margin: 20rpx 0rpx;
	.item {
		font-size: 28rpx;
		color: $tom-text-sub-color2;
		position: relative;
	}
	.item1 {
		color: $text-color;
		font-weight: bold;
	}
	.item1::before {
		content: '';
		position: absolute;
		bottom: -12rpx;
		left: 15%;
		width: 70%;
		height: 4rpx;
		background-color: $text-color;
	}
}
.Data_nr {
	margin: 30rpx $nr-padd $nr-padd;
	background-color: #fff;
	border-radius: 18rpx;
	color: $tom-text-color;
	display: flex;
	flex-direction: column;
	padding: 0px 40rpx;
	.Data_nr_title {
		text-align: center;
		color: $text-color;
		margin: 24rpx 0rpx 30rpx 0rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
	.Data_nr_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0rpx;
		border-bottom: 2rpx solid $page-bg;
		.left {
			width: 100%;
			font-weight: bold;
			font-size: 28rpx;
			color: $tom-text-color;
		}
		.right {
			width: 100%;
			font-size: 28rpx;
		}
		.red {
			color: $tom-text-red;
		}
	}
	.Data_nr_details {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: $tom-text-color;
		padding: 20rpx 0rpx;
		.text {
			font-size: 28rpx;
		}
	}
}
.my-chart{
	background:#fff;
	.btn_list {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 30rpx $nr-padd;
		padding-bottom:0;
		
		.btn {
			font-size: 28rpx;
			color: #FFF;
			background-color: #0032B7;
			padding: 14rpx 30rpx;
			border-radius: 100rpx;
			margin-left: 20rpx;
			box-shadow: $tom-block-shadow;
		}
	}
	.Chart {
		width: 100%;
		height: 400upx;
		margin-top: 20rpx;
	}
}

.pop_nr {
	background-color: #fff;
	width: 600rpx;
	overflow: hidden;
	color: $tom-text-color;
	border-radius: 10rpx;
	.pop_title {
		text-align: center;
		font-size: 36rpx;
		color: $tom-text-color;
		font-weight: bold;
		margin: 20rpx 0rpx;
	}
	.pop_calendar {
		background-color: $page-bg;
		padding: 18rpx 10rpx;
		text-align: center;
		margin: 40rpx 60rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		border: 2rpx solid $tom-text-sub-color3;
	}
	.lisy_btn {
		display: flex;
		justify-content: space-between;
		margin: 0rpx 60rpx 30rpx 60rpx;
	}
}

.cell_yun {
	display: flex;
	justify-content: space-around;
	.item {
		text-align: center;
		color: $tom-text-color;
		margin-bottom: 40rpx;
		.item_top {
			width: 240rpx;
			height: 240rpx;
			background-image: url('/static/new_images/data-pic.gif');
			background-size: 100% 100%;
			background-position: left top;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 44rpx;
			word-break: break-word;
			white-space: pre-line;
			font-weight: bold;
		}
		.item_text {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}
</style>
